<template>
  <div id="container" class="app-container">
    <div id="card">
      <el-card class="box-card" style="width: 500px; height: 320px; margin-top: 50px">
        <div slot="header" class="clearfix">
          <span>信息公告</span>
        </div>
        <div class="text item">
          <div class="line">当前库存<span>{{ stockSum }}</span>件产品</div>
          <div class="line">总价值<span>{{ totalValue }}</span>元</div>
          <div class="line">共有<span>{{ categoryList.length }}</span>种不同类别</div>
          <div class="line">近30天最热销的产品是<span>{{ hottest }}</span></div>
        </div>
      </el-card>
    </div>
    <div id="graphs">
      <div id="prodTypeGraph" class="graph" />
      <div id="priceCountGraph" class="graph" />
    </div>
  </div>
</template>

<script>
import * as all from '@/api/product'
export default {
  name: 'ProductData',
  data() {
    return {
      categoryList: [],
      list: [],
      stockSum: '',
      totalValue: '',
      hottest: '',
      prodTypeOption: {
        title: {
          text: '产品类型/库存',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {
                value: '', name: ''
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      priceCountOption: {
        title: {
          text: '不同价格区间的商品数量'
        },
        xAxis: {
          type: 'category',
          data: ['0-5', '5-10', '10-15', '15-20', '20-25', '25-30', '30以上']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      }
    }
  },
  mounted() {
    this.createProdTypeGraph()
    this.createPriceCountGraph()
  },
  created() {
    this.getCategory()
    this.getHottest()
    this.getSum()
    this.getTotalValue()
  },
  methods: {
    getCategory() {
      all.getProductCategory().then(response => {
        const { content } = response
        this.categoryList = content
      })
    },
    getSum() {
      all.getProductSum().then(response => {
        const { content } = response
        this.stockSum = content
      })
    },
    getTotalValue() {
      all.getProductValue().then(response => {
        const { content } = response
        this.totalValue = content
      })
    },
    getHottest() {
      all.getHottestIn30Day().then(response => {
        const { content } = response
        this.hottest = content.title
      })
    },
    createProdTypeGraph() {
      const myChart = this.$echarts.init(document.getElementById('prodTypeGraph'))
      all.getCountByType().then(response => {
        const { content } = response
        const params = JSON.parse(JSON.stringify(this.prodTypeOption))
        params['series'][0]['data'] = content
        myChart.setOption(params)
      })
    },
    createPriceCountGraph() {
      const myChart = this.$echarts.init(document.getElementById('priceCountGraph'))
      all.getCountByPrice().then(response => {
        const { content } = response
        const data = this.priceCountOption['xAxis']['data']
        const y = []
        for (let i = 0; i < data.length; i++) {
          y.push(content[0][data[i]])
        }
        this.priceCountOption['series'][0]['data'] = y
        myChart.setOption(this.priceCountOption)
      })
    }
  }
}
</script>

<style scoped>
 #container {
  display: flex;
   width: 1300px;
   height: 620px;
   justify-content: center;
   align-content: center;
 }
 #card {
   width: 50%;
   display: flex;
   justify-content: center;
   align-content: center;
   width: 600px;
   height: 720px;
   margin-right: 150px;
 }

 #graphs {
   width: 50%;
   display: flex;
   justify-content: center;
   align-content: center;
   flex-direction: column;
 }
 .graph {
   width: 400px;
   height: 300px;
 }
 .line {
   margin-bottom: 10px;
 }
 span {
   font-size: 30px;
   font-weight: bolder;
   margin-left: 10px;
   margin-right: 10px;
 }
</style>

